<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/all.css">
    <!-- 小图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <style>
        Form {
            margin: auto;
        }
    </style>
</head>

<body>
    <header>
        <h1>无林楚月的个人博客</h1>
        <nav>
            <ul>
                <li><a href="./home.html">主页</a></li>
                <li><a href="./works.html">作品集</a></li>
                <li><a href="./message.html">留言</a></li>
                <li><a href="./webmap.html">网站地图</a></li>
                <li class="dropdown">
                    <!-- 小三角 -->
                    <a href="javascript:void(0)" class="dropbtn">更多 <i class="fas fa-caret-down"></i></a>
                    <!-- 下拉菜单 -->
                    <div class="dropdown-content">
                        <a href="./aboutme.html">关于我</a>
                        <a href="./contant.html">联系方式</a>
                    </div>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="container">
            <form id="loginForm" class="Form">
                <table>
                    <caption class="表单标题" style="font: 3em orange;">
                        登陆后方可留言
                    </caption>
                    <tr>
                        <td width="25%">
                            用户名(必填)
                        </td>
                        <td width="75%">
                            <input type="text" name="username" id="username" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            密&nbsp;&nbsp;&nbsp;码(必填)
                        </td>
                        <td>
                            <input type="password" name="password" id="password" required>
                        </td>
                    </tr>
                    <tr>
                        <td>姓名(必填):</td>
                        <td>
                            <input type="text" name="name" id="name" required>
                        </td>
                    </tr>
                    <tr>
                        <td>联系方式:</td>
                        <td>
                            <input type="number" name="contact" id="contact">
                        </td>
                    </tr>
                    <tr>
                        <td>什么目的:</td>
                        <td>
                            <input type="checkbox" name="purpose" value="查看评论">查看评论
                            <input type="checkbox" name="purpose" value="写评论">写评论
                            <input type="checkbox" name="purpose" value="编辑评论">编辑评论
                            <input type="checkbox" name="purpose" value="点错了">点错了
                        </td>
                    </tr>
                    <tr>
                        <td>权限:</td>
                        <td>
                            <select name="role" id="role">
                                <!-- 下拉列表 -->
                                <option value="访客">访客</option>
                                <option value="胥鼎盛本人">胥鼎盛本人</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>请留言(新用户必填):</td>
                        <td>
                            <textarea name="messages" id="messages" rows="5" cols="33"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="reset" style="font-size: 2em;">
                        </td>
                        <td>
                            <input type="button" value="登录/注册" id="loginBtn" style="font-size: 2em;">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </main>
    <footer>
        <p>&copy; 欢迎访问，合作请联系3053624046@qq.com,谢谢</p>
        <div class="social-icons">
            <a href="https://twitter.com/" class="social-icon"><i class="fab fa-twitter"></i></a>
            <a href="https://www.facebook.com/" class="social-icon"><i class="fab fa-facebook"></i></a>
            <a href="https://www.instagram.com/" class="social-icon"><i class="fab fa-instagram"></i></a>
        </div>
    </footer>

    <script>
        // import axios from 'axios';
        // const axios = require('axios')
        // console.log(axios.get)
        const loginBtn = document.getElementById('loginBtn');
        const IP = '127.0.0.1'
        //登录处理
        loginBtn.addEventListener('click', async () => {
            const form = document.getElementById('loginForm');
            const formData = new FormData(form); // 创建表单数据对象

            // 获取表单中的所有必填项
            const requiredFields = form.querySelectorAll('[required]');
            let isValid = true;

            // 验证必填项是否为空
            for (let field of requiredFields) { // 使用for...of代替forEach
                if (!field.value.trim()) {
                    alert(`${field.closest('td').previousElementSibling.textContent.trim()} 是必填项`);
                    isValid = false;
                    break; // 遇到必填项为空时，直接退出循环
                }
            }

            // 如果验证未通过，阻止表单提交
            if (!isValid) {
                return;
            }

            const username = formData.get('username'); // 获取用户名
            const password = formData.get('password'); // 获取密码

            // 用户名和密码验证
            if (username.length < 2) {
                alert('用户名必须不少于两个字符');
                return;
            }
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,12}$/; // 密码验证正则表达式
            if (!passwordRegex.test(password)) {
                alert('密码必须由5到12位字母和数字组成，并且包含至少一个字母和一个数字');
                return;
            }

            //向后端发送的数据
            const data = {
                username: username, // 获取用户名
                password: password, // 获取密码
                name: formData.get('name'), // 获取姓名
                contact: formData.get('contact'), // 获取联系方式
                role: formData.get('role'), // 获取选择的角色
                messages: formData.get('messages')
            };

            // 胥鼎胜的逻辑验证
            if (data.role === '胥鼎盛本人' && data.username !== 'admin') {
                alert('什么人都敢自称胥鼎盛？');
                return;
            }
            if (data.username === 'admin' && data.role !== '胥鼎盛本人') {
                alert('尊贵的胥鼎盛，请以管理员权限登录');
                return;
            }

            //向后端发送数据
            try {
                const response = await fetch(`http://${IP}:5362/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.message); // 统一处理错误信息
                }
                // 处理成功响应
                alert(result.message);
                //页面跳转
                if (result.message === '登录成功' || result.message === '注册成功') {
                    if (data.role === '胥鼎盛本人') {
                        window.location.href = './back-end.html';
                    }
                    else {
                        window.location.href = './back-end1.html';
                    }
                }
            } catch (error) {
                console.error('Error:', error); // 处理错误
                alert(error.message);
            }
        });

    </script>
    <script src="../JS/all.js"></script>
</body>

</html>